<!--
 * @Author: your name
 * @Date: 2021-05-17 08:47:11
 * @LastEditTime: 2021-05-18 14:58:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \english\src\components\Footer.vue
-->
<template>
  <div class="bom">
    <div class="tab" v-for="(item, index) in tab" :key="index">
      <router-link :to="item.url">
        <img :src="item.image" alt="" />
        <p>{{ item.text }}</p>
      </router-link>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: [
        { image: require("../assets/study.png"), text: "学习中心",url:'/index' },
        { image: require("../assets/cuo.png"), text: "错题本",url:'/wrong' },
        { image: require("../assets/ping.png"), text: "在线测评",url:'/Evaluation' },
      ],
    };
  },
};
</script>

<style lang="scss">
.bom {
      display: flex;
      justify-content: space-between;
      width: 50%;
      padding: 20px 25%;
      position: fixed;
      bottom: 0;
      background: #fff;
      border-top: 1px solid #F1F1F1;

      a {
        color: #000;
      }

      .tab {
          width: 32%;
          text-align: center;

            p {
                margin-top: 10px;
            }
      }
  }
</style>